<template>
  <HelloWorld msg="Hello Vue 3.0 + Vite00" />
  <h1 @click="changeMsg">{{ note }}</h1>

  <!-- v-once的内容只渲染一次 -->
  <div v-once>v-once的内容只渲染一次：{{ note }}</div>

  <!-- v-html可插入html代码 -->
  <div v-html="htmlContent"></div>

  <!-- v-bind绑定属性的内容 -->
  <div :id="setid"></div>

  <!-- 项目创建 -->
  <h1>npm init vite-app project-name</h1>
</template>

<style scoped>
#d1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

#d2 {
  width: 100px;
  height: 100px;
  background-color: green;
}
</style>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      note: "today is a nice day",
      htmlContent: "<h1 >标题1</h1>",
      setid: "d1",
    };
  },
  methods: {
    changeMsg() {
      this.note += "修改-";
      this.setid = this.setid == "d1" ? "d2" : "d1";
    },
  },
};
</script>
